<template>
  <el-upload v-loading="uploading" v-bind="initialProp()">
    <template v-if="type == 'uImg'">
      <img v-if="fileUrl != ''" :src="fileUrl" class="img_uploader_img" />
      <Icon v-else icon="Plus" class="img_uploader_icon"></Icon>
    </template>
    <Icon v-else-if="type == 'uImgs'" icon="Plus" class="img_uploader_icon"></Icon>
    <template v-else>
      <el-button size="small" type="primary" :loading="uploading">{{ item?.btnText || "上传" }}</el-button>
      <template v-if="type == 'uVideo'">
        <video v-for="item in fileList" :key="item" :src="item" style="height: 200px" controls x-webkit-airplay playsinline webkit-playsinline></video>
      </template>
    </template>
  </el-upload>
  <el-dialog v-model="open" v-if="type == 'uImgs'">
    <img style="width: 100%" :src="dialogImageUrl" alt="" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { useAllStore } from "@/store/modules/base";
import type { UploadFile, UploadRawFile } from "element-plus";
import { imgUrlDefault, audioUrlDefault } from "../../../config/configue";
export interface CuploadFilePopsType {
  audioUrl?: string;
  actionUrl?: string;
  type: CuploadFileTypesType;
  fileProp: string;
  item: any;
}
let props = withDefaults(defineProps<CuploadFilePopsType>(), {
  audioUrl: audioUrlDefault,
  actionUrl: imgUrlDefault,
  type: "uImg",
  fileProp: "",
  item: {}
});
const emit = defineEmits(["beforeUpload", "getFile"]);
const store = useAllStore();
const fileType = ref({
  uFile: "xlsx,.xls",
  uVideo: ".mp4,.quicktime",
  uAudio: ".mp3,.m4a",
  uImg: ".jpg,.png,.jpeg,.tif,.tiff",
  uImgs: ".jpg,.png,.jpeg,.tif,.tiff"
});
const fileUrl = ref("");
const dialogImageUrl = ref("");
const open = ref(false);
const fileList = ref([]);
const uploading = ref(false);
function handleBefore(file: UploadRawFile) {
  emit("beforeUpload", { file });
}
const successFn = (file: any) => {
  console.log(666);
  uploading.value = false;
  if (props.type == "uImg") {
    fileUrl.value = file.data;
    return emit("getFile", { e: fileUrl.value[0] });
  }
  return emit("getFile", { e: fileList.value });
};
// 查看大图
const handlePreview = (file: UploadFile) => {
  // if (!file.url) return ElMessage.error("缺少图片地址");
  dialogImageUrl.value = file.url as string;
  open.value = true;
};
const handleRemove = (file: UploadFile) => {
  if (file.status === "success") {
    emit("getFile", { e: fileList.value });
  }
};
const io = {
  class: "video-uploader",
  limit: props.item?.limit || 12,
  fileList: fileList.value,
  "before-upload": handleBefore,
  "on-success": successFn
};
const uploadPropsList = {
  uImg: {
    class: "img_uploader",
    showFilelist: false,
    "on-preview": handlePreview,
    "on-success": successFn
  },
  uImgs: {
    class: "img_uploader",
    limit: props.item?.limit || 12,
    fileList: fileList.value,
    listType: "picture-card",
    "on-preview": handlePreview,
    "on-remove": handleRemove
  },
  uVideo: { ...io, "on-remove": handleRemove },
  uAudio: { ...io, "on-remove": handleRemove },
  uFile: { ...io, "on-remove": handleRemove }
};
function initialProp() {
  return {
    action: props.actionUrl,
    accept: props.item.uploadFileType||fileType.value[props.type],
    headers: {
      Authorization: store.token
    },
    ...uploadPropsList[props.type]
  };
}
defineExpose({
  fileList,
  fileUrl,
});
</script>

<style lang="scss">
.img_uploader {
  .img_uploader_img {
    width: 140px;
  }
  .el-upload--text {
    width: 140px;
    height: 140px;
    border: 1px dashed #beb1b1;
    display: flex;
    align-items: center;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    justify-content: center;
  }
  .img_uploader_icon {
    width: 30px;
    height: 30px;
  }
}
.video-uploader .el-upload--text {
  width: auto;
  height: auto;
}
</style>
